<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

<script>
    $(function () {
        //columns in data array : Sr No, Company Name, Revenues(domestic), Revenues(export), expenditure
        var data = [[1, 'Exxon Mobil', 'Ex', '339938.0', '36130.0', '23333.0'],
            [2, 'Wal-Mart Stores', 'WS', '315654.0', '11231.0', '24342.0'],
			[3, 'Royal Dutch Shell', 'RDS', '306731.0', '25311.0', '56231.2'],
			[4, 'BP', 'B', '267600.0', '22341.0', '71923.4'],
			[5, 'General Motors', 'GM', '192604.0', '-10567.0', '52934.0'],
			[6, 'Chevron', 'C', '189481.0', '14099.0', '12023.5'],
			[7, 'DaimlerChrysler', 'DC', '186106.3', '3536.3', '42734.0'],
			[8, 'Toyota Motor', 'TM', '185805.0', '12119.6', '57023.4'],
			[9, 'Ford Motor', 'FM', '177210.0', '2024.0', '22896.0'],
			[10, 'ConocoPhillips', 'CP', '166683.0', '13529.0', '72456.0'],
			[11, 'General Electric', 'GE', '157153.0', '16353.0', '16912.5'],
			[12, 'Total', 'T', '152360.7', '15250.0', '74236.5'],
			[13, 'ING Group', 'IG', '138235.3', '8958.9', '52012.9'],
			[14, 'Citigroup', 'CG', '131045.0', '24589.0', '90342.0'],
			[15, 'AXA', 'A', '129839.2', '5186.5', '13043.8'],
			[16, 'Allianz', 'AZ', '121406.0', '5442.4', '19529.5'],
			[17, 'Volkswagen', 'VW', '118376.6', '1391.7', '84472.7'],
			[18, 'Fortis', 'F', '112351.4', '4896.3', '83473.0'],
			[19, 'Crédit Agricole', 'CA', '110764.6', '7434.3', '14567.4'],
			[20, 'American Intl. Group', 'AIG', '108905.0', '10477.0', '10533.0']];

        for (var i = 0; i < data.length; i++) {
            //rev(total)
            var revDom = parseFloat(data[i][3].replace(",", ""));
            var revExp = parseFloat(data[i][4].replace(",", ""));
            var expenditure = parseFloat(data[i][5].replace(",", ""));
            data[i][6] = revTotal = revDom + revExp;
            //profits
            data[i][7] = revTotal - expenditure;
        }
        //calculate Rank based on profits
        data = data.sort(function (obj1, obj2) {
            var val1 = obj1[7];
            var val2 = obj2[7];
            val1 = val1 ? parseInt(val1) : 0;
            val2 = val2 ? parseInt(val2) : 0;

            return (val2 - val1);
        });
        for (var i = 0; i < data.length; i++) {
            var rdata = data[i];
            //Rank
            rdata[8] = (i + 1);
            rdata[9] = Math.random();
            rdata[10] = Math.random();
            rdata[11] = Math.random();
            rdata[12] = Math.random();
            rdata[13] = Math.random();
            rdata[14] = Math.random();
            rdata[15] = Math.random();
            rdata[16] = Math.random();
        }

        var obj = { width: 750,
            height: 430,            
            showTop:false,
            title: "Grid with header grouping",
            showBottom: false,
            hoverMode: 'cell',
            selectionModel: { type: 'cell' },            
            freezeCols: 1,            
            numberCell: { show: true },
            editable: true,
            resizable: true
        };
        obj.columnTemplate = {width:100, align:'right'};
        obj.colModel = [{ title: "Some No", colModel: [] },
            { title: "Company", width: 140, align: "center", colModel: [{ title: "Company A" }, { title: "Company B"}] },
            { title: "Balance Sheet", align: "center", colModel: [
                { title: "Revenues ($ millions)", dataType: "float", align: "center", colModel: [
                    { title: "Domestic", dataIndx: 3, align: "right", dataType: "float" },
                    { title: "Exports", dataIndx: 4, align: 'right', dataType: "float" },
                    { title: "Total", width: 120, editable: false, dataIndx: 6, align: "right", dataType: "float", render: function (ui) {
                        return $.paramquery.formatCurrency(ui.rowData[ui.dataIndx]);
                    }
                    }
                ]
                },
                { title: "Expenditure <br /> ($ millions)", dataType: "float", align: "right", dataIndx: 5 },
                { title: "Profits ($ millions)<br/>Revenues - Expenditure", width: 140, dataType: "float", align: "right", editable: false, dataIndx: 7, render: function (ui) {
                    return $.paramquery.formatCurrency(ui.rowData[ui.dataIndx]);
                }
                }
                ]
            },
        //{ title: "Rank", editable: false, width: 140, align: 'center', dataIndx: 7}];
        {title: "Rank", align: 'center', colModel: [{ dataIndx: 8, title: "Rank1" }, { title: "Rank2", colModel:
            [{ title: "Rank21" }, { title: "Rank 22", colModel: [{ title: "Rank 221" }, { title: "Rank 222", colModel: [{ title: "Rank 2221" }, { title: "Rank 2222" }, { title: "Rank 2223"}]}]
            }, { title: "Rank 3"}]
        }
        ]
    }, { title: "Column", align: "center", colModel: [{ title: "Column1" }, { title: "Column2"}]}];
    
    obj.dataModel = {
        data: data,
        sortIndx: 1
    };
    var $grid = $("#grid_group").pqGrid(obj);
});
        
</script>    
</head>
<body>
The data in pqGrid can be grouped by columns. It's achieved by using intuitive nested column models, the rest of the procedure is same as creating normal grids. 
Notice how the columns are reordered using drag and drop when headers are grouped.
<div id="grid_group" style="margin:auto;"></div>

</body>

</html>
